<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="font-size: 16px;">
      <el-breadcrumb-item :to="{ path: '/consumer' }">
        <i class="el-icon-s-promotion"></i> 个人管理
      </el-breadcrumb-item>
      <el-breadcrumb-item>修改信息</el-breadcrumb-item>
    </el-breadcrumb>
    <el-divider></el-divider>
    <!--表单开始-->
      <el-form label-width="80px">
        <el-form-item label="个人头像">
          <img :src="p.url" width="100px" alt="">
          <!--上传组件开始-->
          <el-upload
              action="/upload"
              name="picFile"
              limit="1"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
          <!--上传组件结束-->
        </el-form-item>

        <el-form-item label="昵称">
          <el-input type="text" v-model="p.title"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="update()">修改个人信息</el-button>
        </el-form-item>
      </el-form>


  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      arr:[],
      p:{title:"",price:"",oldPrice:"",saleCount:"",num:"",categoryId:"",url:""},
      newUrl:""
    }
  },
  methods:{
    update(){
      if (v.newUrl!=""){
        v.p.url = v.newUrl;
      }
      //发出添加商品的请求
      axios.post("/product/update",v.p).then(function () {
        alert("修改完成!");
        location.href="/admin.html?currentIndex=3-1";
      })
    },
    handleSuccess(response,file,fileList){
      v.newUrl = response;
    },
    goBack() {
      console.log('go back');
      //返回上一页面
      history.back();
    },
    handleRemove(file, fileList) {
      //发出删除图片的请求
      axios.get("/remove?url="+v.p.url).then(function () {
        v.newUrl="";
        console.log("服务器图片删除完成!");
      })
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },

  mounted() {
  }
}
</script>

<style scoped>

</style>